<script setup lang="ts">
defineProps(['tableData', 'handleDelete', 'handleEdit', 'TableName', 'ButtonData', 'handleCheck', 'pageSize', 'currentPage'])

import { pages } from '../../hooks/index'

</script>

<template>

    <div style="width: 100%; height: 500px; background: #fff; overflow: scroll;">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column v-for="(item, index) in TableName" :key="index" :property="item.text" :label="item.title"
                width="180">
                <template #default="scope" v-if="item.text === 'image'">
                    <img :src="scope.row.image" style="width: 100px;height: 100%;">
                </template>
                <template #default="scope" v-if="item.text === 'switch'">
                    <el-switch :v-model="scope.row.state" class="ml-2" width="60" inline-prompt active-text="良好"
                        inactive-text="极差" />
                </template>
                <template #default="scope" v-if="item.text === 'status'">
                    <p v-if="scope.row.status === '1'">未毕业</p>
                    <p v-else-if="scope.row.status === '2'">返校重听</p>
                    <p v-else-if="scope.row.status === '3'">已就业</p>
                    <p v-else-if="scope.row.status === '4'">返回为毕业</p>
                    <p v-else-if="scope.row.status === '5'">以往未就业</p>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>